<template> 
    <ul class="position-and-ranking">
        <li>
            <i class="fa fa-car"></i>
            <a>定位失败</a>
        </li>
        <li style="border-left:1px solid #eee;">
            <i class="fa fa-motorcycle" aria-hidden="true"></i>
            <a>必玩榜单</a>
        </li>
    </ul>
</template>

<script type="text/javascript">
export default {
    name: 'PositionAndRanking',
    data () {
        return {
            positionError:"",
            rankingUrl:""  
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" scoped>
 /* 弹性盒父元素display:box是老式写法，需要带浏览器前缀，现在统一要求写成display:flex;我暂时不改老师这个 */
  .position-and-ranking{
    width: 100%;
    display: -webkit-box;        
    background-color: #fff;
  }
  .position-and-ranking > li{
    border-top: 1px solid #eee;
    margin-top: .1rem;
    overflow: hidden;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flexbox-flex: 1;
    box-flex: 1;
    width: 0;
    height: .98rem;
    font-size: .28rem;
    color: #212121;
    line-height: .98rem;
    text-align: center;
  }
</style>
